<template>
	<view class="flex-col page">
		<view class="flex-col flex-auto group space-y-20">
			<view class="flex-col group_2 space-y-48">
				<view class="flex-row justify-between">
					<view class="flex-row">
						<image class="image_8" :src="content.avatar" />
						<view class="flex-col items-start group_3 space-y-31">
							<text class="font_1 text">{{content.nickname}}</text>
							<text class="font_2 text_3">推荐人：{{content.invite_name}}</text>
						</view>
					</view>
					<button open-type="share" class="flex-row items-center self-start group_4 space-x-12">
						<!-- <image class="shrink-0 image_9" src="/static/share_ac.png" /> -->
						<text class="font_2 text_2">点击右上角分享</text>
					</button>
				</view>
				<view class="flex-col section_3">
					<view class="flex-col group_5">
						<view class="shrink-0 section_4"></view>
						<view class="flex-row equal-division group_6">
							<view class="flex-col items-center group_7 equal-division-item space-y-26">
								<text class="font_3 text_4">累计佣金</text>
								<text class="font_4">￥{{content.commission_total}}</text>
							</view>
							<view class="flex-col items-center group_8 equal-division-item space-y-26">
								<text class="font_3 text_5">累计提现</text>
								<text class="font_4">￥{{content.withdraw_total}}</text>
							</view>
						</view>
					</view>
					<view class="flex-row justify-between items-center relative section_5">

						<view class="flex-row equal-division_2 group_9">
							<view class="flex-col items-start equal-division-item space-y-19">
								<text class="font_5 text_6">￥{{content.in_withdraw}}</text>
								<text class="font_2 text_9">提现中金额</text>
							</view>
							<view class="horiz-divider section_6"></view>
							<view class="flex-row items-center group_10 equal-division-item space-x-86">
								<view class="flex-col items-start shrink-0 space-y-19">
									<text class="font_5 text_7">￥{{content.commission}}</text>
									<text class="font_2 text_10">可提现金额</text>
								</view>
							</view>
						</view>
						<view class="button flex-row justify-center items-center section_7" @click="toCash">
							<text class="text_8">提现</text>
						</view>
					</view>
				</view>
			</view>
			<view class="flex-col justify-start relative group_11">
				<view class="section_8"></view>
				<view class="section_10 pos_4"></view>
				<view class="flex-col line-tabs pos_3">
					<view class="flex-row group_12">
						<view class="flex-col justify-center items-center relative group_13" @click="toType(0)">
							<text class="font_5" :class="type==0?'text_11':'text_12'">佣金明细</text>
							<view class="section_9" v-if="type==0"></view>
						</view>
						<view class="flex-col justify-center items-center relative group_13" @click="toType(1)">
							<text class="font_5" :class="type==1?'text_11':'text_12'">我的团队</text>
							<view class="section_9" v-if="type==1"></view>
						</view>
						<view class="flex-col justify-center items-center relative group_13" @click="toType(2)">
							<text class="font_5" :class="type==2?'text_11':'text_12'">会员返佣</text>
							<view class="section_9" v-if="type==2"></view>
						</view>
					</view>
					<view class="flex-col group_2" v-if="type==0">
						<view class="flex-col list-item" v-for="(item, index) in list" :key="index">
							<view class="flex-row items-center group_14 space-x-21">
								<image class="image_8" :src="item.avatar" />
								<view class="flex-col items-start space-y-22">
									<text class="font_1 text_13">{{item.nickname}}</text>
									<text class="font_6">{{item.create_time}}</text>
								</view>
							</view>
							<view class="flex-col section_11">
								<text class="self-start font_7">订单号：{{item.order_sn}}</text>
								<view class="flex-row items-center group_15 space-x-12">
									<text class="font_8 text_14">订单金额：</text>
									<text class="font_9">￥{{item.pay_amounts}}</text>
								</view>
								<view class="flex-row items-center group_16 space-x-12">
									<text class="font_8 text_15">推广收入：</text>
									<text class="font_10">￥{{item.commission}}</text>
								</view>
							</view>
						</view>
					</view>
					<view class="flex-col group_2" v-if="type==1">
						<view class="flex-col list-item" v-for="(item, index) in list1" :key="index"
							style="padding-bottom: 0;">
							<view class="flex-row items-center group_14 space-x-21">
								<image class="image_8" :src="item.avatar" />
								<view class="flex-col space-y-22" style="width: 100%;">
									<view class="flex-row items-center justify-between" style="width: 83%;">
										<text class="font_1 text_13">{{item.nickname}}</text>
										<text class="text13">{{item.commission}}</text>
									</view>
									<view class="flex-row items-center justify-between" style="width: 83%;">
										<text class="font_6">{{item.create_time}}</text>
										<text class="font6">贡献佣金</text>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="flex-col group_2" v-if="type==2">
						<view class="flex-col list-item" v-for="(item, index) in list" :key="index"
							style="padding-bottom: 0;">
							<view class="flex-row items-center group_14 space-x-21">
								<image class="image_8" :src="item.avatar" />
								<view class="flex-col space-y-22" style="width: 100%;">
									<view class="flex-row items-center justify-between" style="width: 83%;">
										<text class="font_1 text_13">{{item.nickname}}</text>
										<text class="text13">{{item.money}}</text>
									</view>
									<view class="flex-row items-center justify-between" style="width: 83%;">
										<text class="font_6">{{item.create_time}}</text>
										<text class="font6">贡献佣金</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onShow,
		onLoad,
		onReachBottom,
		onShareAppMessage,
		onShareTimeline
	} from "@dcloudio/uni-app";
	import {
		onMounted,
		ref,
		reactive,
		getCurrentInstance
	} from "vue"
	const {
		proxy
	} = getCurrentInstance()

	let list = ref([])
	let list1 = ref([])
	let p = ref(1)
	let type = ref(0)
	let content = ref({})
	onLoad(() => {
	})
	onShow(() => {
		toSign()
		list.value.length = 0
		p.value = 1
		getDate()
		getList()
	})
	onReachBottom(() => {
		console.log("上拉");
		if (type.value == 0) {
			p.value++
			getDate()
		}
	})
	// onShareAppMessage(() => {
	// 	return {
	// 		title: '不拘一格', //分享的名称
	// 		path: '/pages/index/index?invite_id=' + uni.getStorageSync('member_id'),
	// 		imageUrl: '../../static/logo.jpg'
	// 	}
	// })
	// onShareTimeline(() => {
	// 	return {
	// 		title: '不拘一格', //分享的名称
	// 		path: '/pages/index/index?invite_id=' + uni.getStorageSync('member_id'),
	// 		imageUrl: '../../static/logo.jpg'
	// 	}
	// })
	const getList = () => {
		let api =type.value==2?proxy.$api.CenterInfo.commissionLists:proxy.$api.CenterInfo.commissionList
		proxy.$req.requestPOST(api, {
			member_id: uni.getStorageSync('member_id') | '',
			p: p.value,
		}).then(res => {
			if (res.flag == "success") {
				list.value = [...list.value, ...res.data.list]
			} else {
				uni.showToast({
					title: res.message,
					icon: 'none'
				})
			}
		})
	}
	const getDate = () => {
		proxy.$req.requestPOST(proxy.$api.CenterInfo.commissionCenter, {
			member_id: uni.getStorageSync('member_id')
		}).then(res => {
			if (res.flag == "success") {
				content.value = res.data
			}
		})
		proxy.$req.requestPOST(proxy.$api.CenterInfo.commissionMember, {
			member_id: uni.getStorageSync('member_id')
		}).then(res => {
			if (res.flag == "success") {
				list1.value = res.data.list
			}
		})
	}
	const getQueryVariable = (variable) => {
		var query = window.location.search.substring(1);
		var vars = query.split("&");
		for (var i = 0; i < vars.length; i++) {
			var pair = vars[i].split("=");
			if (pair[0] == variable) {
				return pair[1];
			}
		}
		return (false);
	}
	const toSign = () => {
		let invite=getQueryVariable('invite_id')
		console.log(invite,'invite');
		let url = invite? window.location.origin + window.location.pathname+'?invite_id=' + uni.getStorageSync('member_id') : window.location.origin + window.location.pathname
		proxy.$req.requestPOST(proxy.$api.IndexInfo.getSign, {
			url: url
		}).then(res1 => {
			console.log(res1);
			if (res1.flag == 'success') {
				let config = {
					debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
					appId: 'wxc4f5144cd4a7f83b', // 必填，公众号的唯一标识
					timestamp: res1.data.timestamp, // 必填，生成签名的时间戳
					nonceStr: res1.data.noncestr, // 必填，生成签名的随机串
					signature: res1.data.sign, // 必填，签名
					jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData'] // 必填，需要使用的JS接口列表
				}
				console.log(config, 'config');
				proxy.$wx.config(config)
				proxy.$wx.error(function(res) {
					// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
					// console.log();
					console.log(res,"config信息验证失败");
					uni.showToast({
						title:JSON.stringify(res.mesage),
						icon:'none'
					})
					// uni.showModal({
					// 	title: JSON.stringify(res.mesage)
					// })
				})
				proxy.$wx.ready(res2 => {
					console.log(res2, 'res2');
					proxy.$wx.updateAppMessageShareData({
						title: '不拘坊市', //分享的名称
						link: window.location.origin + window.location.pathname+'?invite_id=' + uni.getStorageSync('member_id'),
						desc: '不拘坊市', // 分享描述
						imageUrl: 'https://libc-ddanm.bujufangshi.com/logo.jpg',
						success: function(res) {
							console.log(res, '成功updateAppMessageShareData');
						},
						fail(res) {
							console.log(res, '失败updateAppMessageShareData');
						}
					})
					proxy.$wx.updateTimelineShareData({
						title: '不拘坊市', //分享的名称
						link:  window.location.origin + window.location.pathname+'?invite_id=' + uni.getStorageSync('member_id'),
						desc: '不拘坊市', // 分享描述
						imageUrl: 'https://libc-ddanm.bujufangshi.com/logo.jpg',
						success: function(res) {
							console.log(res,
								'成功updateAppMessageShareData');
						},
						fail(res) {
							console.log(res, '失败updateAppMessageShareData');
						}
					})
				})
			}
		})
	}
	const toType = (num) => {
		type.value = num
		list.value.length = 0
		p.value = 1
		getDate()
		getList()
	}
	const toDetail = (active_id, type) => {
		uni.navigateTo({
			url: '/pages/buyingDetail/buyingDetail?type=' + type + '&active_id=' + active_id
		})
	}
	const toCash = () => {
		uni.navigateTo({
			url: '/pages/CashOut/CashOut'
		})
	}
</script>

<style scoped lang="scss">
	button {
		border: 0 !important;
		outline: none !important;
		// margin: 0 !important;
		// padding: 0 !important;
		background-color: #fff !important;
	}

	button::after {
		border: 0 !important;
		height: 100% !important;
	}

	.page {
		background-color: #ffffff;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;

		.group {
			padding-top: 42rpx;
			overflow-y: auto;

			.group_2 {
				padding: 0 30rpx;

				.image_8 {
					width: 88rpx;
					height: 88rpx;
					border-radius: 50%;
				}

				.group_3 {
					margin: 6rpx 0 6rpx 24rpx;

					.text {
						line-height: 22rpx;
					}

					.text_3 {
						color: #999999;
					}
				}

				.space-y-31 {

					&>view:not(:first-child),
					&>text:not(:first-child),
					&>image:not(:first-child) {
						margin-top: 31rpx;
					}
				}

				.group_4 {
					margin-right: 7rpx;
					margin-top: 20rpx;

					.image_9 {
						width: 32rpx;
						height: 32rpx;
					}

					.text_2 {
						color: #fe8100;
					}
				}

				.space-x-12 {

					&>view:not(:first-child),
					&>text:not(:first-child),
					&>image:not(:first-child) {
						margin-left: 12rpx;
					}
				}

				.font_2 {
					font-size: 24rpx;
					font-family: PingFangHeiTC;
					line-height: 23rpx;
					color: #ffffff;
				}

				.section_3 {
					background-color: #ffffff;
					background-image: linear-gradient(-40deg, #ff4c3b 0%, #ff7568 100%),
						linear-gradient(-40deg, #293ffc 0%, #1d8cfb 100%);
					border-radius: 20rpx;

					.group_5 {
						padding-bottom: 34rpx;
						height: 191rpx;

						.section_4 {
							border-radius: 0px 0px 20rpx 20rpx;
							background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/65289a27ce83440011a2c3ab/16971783719182708602.png');
							background-size: 100% 100%;
							background-repeat: no-repeat;
							height: 111rpx;
						}

						.equal-division {
							position: relative;
							margin-top: -63rpx;

							.group_7 {
								flex: 1 1 322rpx;

								.text_4 {
									line-height: 24rpx;
								}
							}

							.space-y-26 {

								&>view:not(:first-child),
								&>text:not(:first-child),
								&>image:not(:first-child) {
									margin-top: 26rpx;
								}
							}

							.group_8 {
								flex: 1 1 322rpx;
								margin-left: 46rpx;

								.text_5 {
									line-height: 24rpx;
								}
							}

							.font_3 {
								font-size: 26rpx;
								font-family: PingFangSC;
								line-height: 23rpx;
								color: #ffffff;
							}

							.font_4 {
								font-size: 48rpx;
								font-family: PingFangSC;
								line-height: 38rpx;
								color: #ffffff;
							}
						}

						.group_6 {
							padding: 0 22rpx;
						}
					}

					.section_5 {
						padding: 42rpx 0 39rpx;
						background-color: #ffffff1a;
						border-radius: 0px 0px 20rpx 20rpx;

						.button {
							margin-right: 24rpx;
						}

						.section_7 {
							background-color: #ffffff;
							border-radius: 24rpx;
							width: 92rpx;
							height: 48rpx;
						}

						.text_8 {
							color: #ff4200;
							font-size: 24rpx;
							font-family: PingFangSC;
							line-height: 23rpx;
						}

						.equal-division_2 {
							width: 80%;
							// position: absolute;
							// left: 0;
							// right: 0;
							// top: 50%;
							// transform: translateY(-50%);

							.space-y-19 {

								&>view:not(:first-child),
								&>text:not(:first-child),
								&>image:not(:first-child) {
									margin-top: 19rpx;
								}

								.text_7 {
									line-height: 26rpx;
								}

								.text_10 {
									margin-left: 7rpx;
								}
							}

							.horiz-divider {
								margin: 11rpx 0;
								margin-right: 30rpx;
							}

							.section_6 {
								background-color: #ffffff1a;
								border-radius: 0px 0px 1rpx 1rpx;
								width: 2rpx;
								height: 66rpx;
							}



							.group_10 {
								margin-right: 3rpx;


							}

							.space-x-86 {

								&>view:not(:first-child),
								&>text:not(:first-child),
								&>image:not(:first-child) {
									margin-left: 86rpx;
								}
							}
						}

						.group_9 {
							padding-left: 41rpx;
							// padding-right: 140rpx;
						}
					}

					.equal-division-item {
						padding: 10rpx 0;
						width: 48%;

						.text_6 {
							line-height: 26rpx;
						}

						.text_9 {
							margin-left: 7rpx;
						}
					}
				}

				.list-item {
					padding-bottom: 30rpx;
					border-bottom: solid 2rpx #f7f7f7;

					.text13 {
						font-size: 36rpx;
						font-family: PingFangSC;
						font-weight: 400;
						color: #FF3333;
						line-height: 36rpx;
					}

					.font6 {
						font-size: 24rpx;
						font-family: PingFangSC;
						font-weight: 400;
						color: #FF3333;
						line-height: 24rpx;
					}

					.group_14 {
						padding-bottom: 28rpx;

						.space-y-22 {

							&>view:not(:first-child),
							&>text:not(:first-child),
							&>image:not(:first-child) {
								margin-top: 22rpx;
							}

							.text_13 {
								line-height: 28rpx;
							}

							.font_6 {
								font-size: 24rpx;
								font-family: PingFang SC;
								line-height: 18rpx;
								color: #999999;
							}
						}
					}

					.space-x-21 {

						&>view:not(:first-child),
						&>text:not(:first-child),
						&>image:not(:first-child) {
							margin-left: 21rpx;
						}
					}

					.section_11 {
						padding: 31rpx 29rpx 38rpx;
						background-color: #f7f7f7;
						border-radius: 10rpx;

						.font_7 {
							font-size: 28rpx;
							font-family: PingFangSC;
							line-height: 27rpx;
							color: #333333;
						}

						.group_15 {
							margin-top: 36rpx;

							.text_14 {
								font-size: 27rpx;
							}

							.font_9 {
								font-size: 26rpx;
								font-family: PingFangSC;
								line-height: 20rpx;
								color: #333333;
							}
						}

						.group_16 {
							margin-top: 30rpx;

							.text_15 {
								font-size: 27rpx;
							}

							.font_10 {
								font-size: 26rpx;
								font-family: PingFangSC;
								line-height: 20rpx;
								color: #ff3333;
							}
						}

						.font_8 {
							font-size: 26rpx;
							font-family: PingFangHeiTC;
							line-height: 25rpx;
							color: #999999;
						}
					}
				}

				.font_1 {
					font-size: 30rpx;
					font-family: PingFangSC;
					line-height: 27rpx;
					color: #333333;
				}
			}

			.space-y-48 {

				&>view:not(:first-child),
				&>text:not(:first-child),
				&>image:not(:first-child) {
					margin-top: 48rpx;
				}
			}

			.group_11 {
				padding-bottom: 207rpx;

				.section_8 {
					background-color: #ffffff;
					height: 723rpx;
				}

				.section_10 {
					background-color: #ffffff;
					height: 486rpx;
				}

				.pos_4 {
					position: absolute;
					left: 30rpx;
					right: 30rpx;
					top: 135rpx;
				}

				.line-tabs {
					padding-bottom: 37rpx;

					.group_12 {
						padding: 0 30rpx 41rpx;

						.group_13 {
							margin-top: 30rpx;
							// padding: 41rpx 0 13rpx;
							height: 80rpx;
							margin-right: 70rpx;

							.text_11 {
								color: #333333;
								line-height: 31rpx;
							}

							.text_12 {
								color: #999999;
								font-size: 32rpx;
								font-family: PingFangHeiTC;
								line-height: 31rpx;
							}
						}

						.space-x-67 {

							&>view:not(:first-child),
							&>text:not(:first-child),
							&>image:not(:first-child) {
								margin-left: 67rpx;
							}
						}

						.section_9 {
							// margin-left: 30rpx;
							background-color: #54bc6e;
							border-radius: 4rpx;
							width: 66rpx;
							height: 8rpx;
							position: absolute;
							bottom: 0;
						}
					}
				}

				.pos_3 {
					position: absolute;
					left: 0;
					right: 0;
					top: 0;
					bottom: 0;
				}
			}

			.font_5 {
				font-size: 32rpx;
				font-family: PingFangSC;
				line-height: 25rpx;
				color: #ffffff;
			}
		}

		.space-y-20 {

			&>view:not(:first-child),
			&>text:not(:first-child),
			&>image:not(:first-child) {
				margin-top: 20rpx;
			}
		}
	}
</style>